<template>
  <div>
    <el-table
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :data="permissionList"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作">
        <template #="{ row }">
          <el-button
            type="primary"
            size="small"
            :disabled="row.level == 4 ? true : false"
            @click="addPermission(row)"
          >
            {{ row.level == 3 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            :disabled="row.level == 1 ? true : false"
            @click="updatePermission(row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="deletePermission(row.id)"
            :disabled="row.level == 1 ? true : false"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogVisible"
      :title="menuParams.id ? '编辑菜单' : '添加菜单'"
    >
      <el-form label-width="60px">
        <el-form-item label="名称">
          <el-input
            placeholder="请输入名称"
            v-model="menuParams.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限值">
          <el-input
            placeholder="请输入权限值"
            v-model="menuParams.code"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveMenu">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import {
  reqGetMenuList,
  reqAddOrUpdateMenu,
  reqDeleteMenu,
} from '@/api/acl/menu'
import type { MenuList, MenuData, MenuParams } from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus'
let permissionList = ref<MenuList>([])
let dialogVisible = ref(false)
let menuParams = reactive<MenuParams>({
  code: '',
  name: '',
  level: 0,
  pid: 0,
})
onMounted(() => {
  getMenuList()
})
const getMenuList = () => {
  reqGetMenuList().then((res) => {
    if (res.code == 200) {
      permissionList.value = res.data
    }
  })
}
const addPermission = (row: MenuData) => {
  Object.assign(menuParams, {
    code: '',
    name: '',
    id: '',
    level: row.level + 1,
    pid: row.id as number,
  })
  dialogVisible.value = true
}
const updatePermission = (row: MenuData) => {
  Object.assign(menuParams, row)
  dialogVisible.value = true
}
const saveMenu = () => {
  reqAddOrUpdateMenu(menuParams).then((res) => {
    if (res.code == 200) {
      ElMessage({
        type: 'success',
        message: menuParams.id ? '修改成功' : '添加成功',
      })
      getMenuList()
      dialogVisible.value = false
    } else {
      ElMessage({
        type: 'error',
        message: menuParams.id ? '修改失败' : '添加失败',
      })
    }
  })
}
const deletePermission = (id: number) => {
  reqDeleteMenu(id).then((res) => {
    if (res.code == 200) {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getMenuList()
    } else {
      ElMessage({
        type: 'error',
        message: '删除失败',
      })
    }
  })
}
</script>
<script lang="ts">
export default {
  name: 'Permission',
}
</script>

<style lang="scss"></style>
